<template>
  <div id="indexheader">
    <div class="header-left">
      <h1>个人收支管理系统</h1>
    </div>
    <div class="header-right">
      <span>欢迎</span>
      <span>{{user.username}}</span>
      <span>
        <el-dropdown trigger="click" @command="downCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-user-solid" command="userinfo">个人信息</el-dropdown-item>
            <el-dropdown-item icon="el-icon-warning" command="logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    // dropdown-item 选项
    downCommand(item) {
      switch (item) {
        case "userinfo":
          this.userinfo();
          break;
        case "logout":
          this.logout();
          break;
      }
    },
    // 个人信息
    userinfo() {
       this.$router.push({ name: "userinfo" });
    },
    // 注销
    logout() {
      localStorage.removeItem("moneyToken");
      this.$store.dispatch("ClearState");
      this.$message({
        type:'success',
        message:'已注销'
      })
      this.$router.replace({ name: "Login" });
    },
  },
};
</script>

<style lang="less" scoped>
#indexheader {
  user-select: none;
  height: 100%;
  color: #fff;
  background-color: rgb(84, 92, 100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-left {
    width: 300px;
    margin-left: 20px;
    h1 {
      font-size: 30px;
      font-weight: 300;
    }
  }
  .header-right {
    font-size: 18px;
    font-weight: 300;
    width: 120px;
    span:nth-child(2) {
      margin: 0 10px;
    }
    .el-dropdown {
      .el-icon-arrow-down {
        color: #fff;
      }
    }
  }
}
</style>